CSS - pixel art - 01

code:
          <div>
              <div id="block" class='block'>0</div>
              <div class="empty"></div>
              <div id="block1" class='block'>1</div>
              <div class="empty"></div>
              <div id="block2" class='block'>2</div> 
              <div class="empty"></div>
              <div id="block3" class='block'>3</div> 
              <div class="empty"></div>
              <div id="block4" class='block'>4</div> 
              <div class="empty"></div>
              <div id="block5" class='block'>5</div>
          </div>
          <style>
            .block{color: white; text-align:center;}
            #block {width: 2vw; height: 2vw; margin: 0 auto; background-color: blue; box-shadow: 0.4vw 0.5vw 1vw 0 gray;}
            #block1 {width: 2vw; height: 2vw; margin: 0 auto; background-color: blue; box-shadow: 0.4vw 0.5vw gray;}
            #block2 {width: 2vw; height: 2vw; margin: 0 auto; background-color: blue; box-shadow: 2vw 0vw  gray;}
            .empty{margin:1vw;}
            #block3{ width: 2vw; height: 2vw; margin: 0 auto; background-color: blue; box-shadow: 2vw 0 gray, -2vw 0 gray;}
            #block4{ width: 2vw; height: 2vw; margin: 0 auto; background-color: blue;box-shadow: 1vw 0 red, 0 1vw green;}
            #block5{ width: 2vw; height: 2vw; margin: 0 auto; background-color: blue;box-shadow: 1vw 0 red, 0 1vw green, -1vw 0 black;}
          </style>
      

code:
          <canvas id="mainCanvas" width="300" height="300"></canvas>
          <style>
            #mainCanvas {width: 38vw; height: 38vw; image-rendering: -moz-crisp-edges; 
              image-rendering: -webkit-crisp-edges; image-rendering: pixelated;
              image-rendering: crisp-edges;}
          </style>
          <script>
              var canvas = document.getElementById("mainCanvas");
              var context = canvas.getContext("2d");
              var smileyImg = new Image();
              smileyImg.onload = function() {
                context.drawImage(smileyImg, 0, 0)
              };
              smileyImg.src = "../pictures/smiley.png";
          </script>
      

code:
          <div id="grid"></div>
          <style>     
              #grid {width: 25vw; height: 35vw; margin: 0 auto; padding: 0.5vw; background-color: white; 
                border: 0.2vw solid #2c3e50;m border-radius: 0.5vw; display: grid; grid-template: 
                repeat(8, 1fr) / repeat(7, 1fr); gap: 1vw;}
              .box {height: 2vw; width: 2vw; border: 0.1vw solid #2c3e50; border-radius: 0.2vw;}
              .box:hover{ cursor: pointer;}
          </style>
          <script>
              let grid = document.getElementById('grid');
              let currentColor;
              function makingGrid(gridNumber) {
                const fragment = document.createDocumentFragment();
                for (let i = 1; i <= gridNumber; i++) {
                  const iElem = document.createElement('div');
                  iElem.classList.add('box');
                  iElem.dataset.boxNumber = i;
                  fragment.appendChild(iElem);
                }
                grid.appendChild(fragment);
              }
              makingGrid(70);

              let boxes = document.querySelectorAll('.box');
              boxes.forEach((box, index) => {
                  box.addEventListener('click', (e) => getBoxes(e, box, boxes.length));
                    if (index >= boxes.length - 7) {
                      box.style.backgroundColor = generateRandomColor();
                  }
              });
              function generateRandomColor() {
                  let maxVal = 0xffffff; // 16777215
                  let randomNumber = Math.random() * maxVal;
                  randomNumber = Math.floor(randomNumber);
                  randomNumber = randomNumber.toString(16);
                  let randColor = randomNumber.padStart(6, 0);
                  return `#${randColor.toUpperCase()}`;
              }
              function getBoxes(e, box, size) {
                  let boxNumber = e.target.dataset.boxNumber;
                  if (boxNumber < size - 7) {
                    if (currentColor) {
                      box.style.backgroundColor = currentColor;
                    } else {
                      console.log('no colour is active');
                    }
                  } else {
                    currentColor = box.style.backgroundColor;
                    console.log('New Background added', currentColor);
                  }
              }
          </script>